<style lang="stylus" rel="stylesheet/stylus" src="./realTimeService.styl"></style>
<template>
  <div class="realTimeService accQuery realTimeDataClass">
    <div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
      <div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
        <span class="title1">当前位置/游戏分析/实时数据/</span>
        <span>{{title}}</span>
        <span class="title1" style="font-size:10px;">（数据更新频率为1分钟）</span>
      </div>
      <div class="right_header_time">
        <div class="block">
          <span>查看日期：</span>
          <el-date-picker
                size="small"
                v-model="date"
                type="date"
                placeholder="选择日期" @change='dateChange'>
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="right_content">
      <div class="listChart1">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p class='zoomIn animated'>分服详细数据</p>
          <div class="chart1-introduce">
            <el-popover
              ref="listChart1_popo"
              placement="top-start"
              title="分服详细数据"
              width="200"
              trigger="hover"
              content="每个服务器的详细数据；"></el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
          <el-button type="primary" size="mini" class="excel"  @click="excel('','实时数据-分服概况-分服详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
            <i class="icon iconfont">&#xe7f0;</i> 导出excel
          </el-button>
        </div>
        <div class="realTimeServiceTableBody">
          <template>
            <el-table
              :data="tableData"
              border
              :style="{width:realTimeServiceTableWidth}"
              :default-sort = "{prop: 'time', order: 'descending'}"
              >
              <el-table-column sortable align="center"
                  v-for="col in tableHeader"
                  :prop="col.prop" :label="col.label" :width='col.width' :fixed="col.fixed"></el-table-column>
            </el-table>
          </template>
        </div>
        <div class="block realTimeServicePage">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal">
          </el-pagination>
        </div>
      </div>
      <div class="listChart2">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p class='zoomIn animated'>全服在线（Top20）- {{lastMaxOnlineNumStr}}；{{serverNumStr}}</p>
          <div class="chart1-introduce">
            <el-popover
              ref="listChart1_popo"
              placement="top-start"
              title="全服在线（Top20）"
              width="200"
              trigger="hover">全服在线（Top20）- {{lastMaxOnlineNumStr}}；{{serverNumStr}}</el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
        </div>
        <div class="realTimeData" id='realTimeData'></div>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              点击查看全服在线详细数据
              <el-button type="primary" size="mini" class="excel"  @click.stop="excel(2,'实时数据-分服概况-点击查看全服在线详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                <i class="icon iconfont">&#xe7f0;</i> 导出excel
              </el-button>
            </template>
            <el-table
              :data="tableData2"
              border
              :style="{width:realTimeServiceTableWidth}"
              :default-sort = "{prop: 'time', order: 'descending'}"
              >
              <el-table-column sortable align="center"
                  v-for="col in tableHeader2"
                  :prop="col.prop" :label="col.label"></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="listChart3">
        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
          <p style="width:10%;" class='zoomIn animated'>分服实时数据</p>
          <el-button type="primary" size="small" @click="chooseServers"  :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
            <i class="el-icon-menu"></i>&nbsp;&nbsp;选择区服
          </el-button>
          <div class="chart1-introduce">
            <el-popover
            ref="listChart1_popo"
            placement="top-start"
            title="分服实时数据"
            width="200"
            trigger="hover">默认为在线人数最多的三个服</el-popover>
            <i class="el-icon-information" v-popover:listChart1_popo></i>
          </div>
        </div>
        <div class="buttonGroup">
          <el-button type="primary" size="small" @click='setOnline("online")'  :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
            <i class="el-icon-more"></i>&nbsp;&nbsp;在线
          </el-button>
          <el-button type="primary" size="small" @click='setOnline("newUser")' :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
            <i class="el-icon-plus"></i>&nbsp;&nbsp;新增
          </el-button>
        </div>
        <div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
        <div class="online" id='online'></div>
      </div>
    </div>
    <!-- filterShow -->
    <div class="shade" v-show="filterShow">
      <div class="shadeChoose">
        <div class="vicp-close"  @click="filterShow=false">
          <i class="el-icon-close vicp-icon4"></i>
        </div>
        <div class="shadeMain">
          <div class="serversChoose">
            <div class="serverSwitch">
              <span class="switch">选择全服：</span>
              <span class="chooseEnd">
                已选择
                <span :style="{'color':this.$store.getters.theme[1]}">{{serverNumber}}</span>
                项
              </span>
            </div>
            <div class="chinnelRadio" v-show="serverSwitch">
              <div class="filter">
                <el-input v-model="serverVal" placeholder="请输入服务器名称" icon="search"></el-input>
                <el-button type="info" size="small" @click='allSelect'>全选</el-button>
                <el-button type="info" size="small" @click='noSelect'>不选</el-button>
                <el-button type="info" size="small" @click='invertSelect'>反选</el-button>
              </div>
              <template>
                <el-checkbox-group v-model="checkedServers" @change="handleCheckedServersChange">
                  <el-checkbox v-for="(val,key) in newServers" :label="val.label" :key="key">{{val.value}}</el-checkbox>
                </el-checkbox-group>
              </template>
              <div class="afterChoose">
                <div class="tagTop">
                  <p>选中筛选条件：</p>
                  <el-button type="danger" size="small" @click='noSelect'>清空</el-button>
                </div>
                <div class="tagGroup">
                  <el-tag
                    :key="tag"
                    v-for="tag in dynamicTags"
                    :closable="true" type="success"
                    :close-transition="false"
                    @close="handleClose(tag)"
                  >{{tag}}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
          <div class="sureBtn">
            <el-button type="info" @click='sure'>确认</el-button>
            <el-button type="danger" @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="./realTimeService.js"></script>